<template>
    <div class="homeinfo">
        <div class="taglist">
            <el-tag style="margin-right: 10px;">{{ info.status }}</el-tag>
            <h3>{{ info.name }}</h3>
        </div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="测评详情" name="first"></el-tab-pane>
            <el-tab-pane :label="'被评测对象' + '(' + total + ')'" name="second"></el-tab-pane>
            <el-tab-pane label="登录码" name="third"></el-tab-pane>
            <!-- <el-tab-pane label="统计结果" name="fourth"></el-tab-pane> -->
        </el-tabs>
        <div v-if="activeName == 'first'">
        <el-button type="primary" @click="tjjg">统计结果</el-button>
            <el-descriptions title="测评信息" :column="2">
                <el-descriptions-item label="开始日期">{{ info.startTime }}</el-descriptions-item>
                <el-descriptions-item label="结束日期">{{ info.endTime }}</el-descriptions-item>
                <el-descriptions-item label="是否收集手写意见">{{ info.isCollect }}</el-descriptions-item>
                <el-descriptions-item label="评测人数限制"> <span style="margin-right: 10px;">公司领导</span>
                    {{ info.limitCompanyLeaders }}
                    <span style="margin:0px 10px;">基层领导</span>
                    {{ info.limitBasicLeaders }}
                    <span style="margin:0px 10px;">员工领导</span>
                    {{ info.limitEmployee }}</el-descriptions-item>
                <el-descriptions-item label="是否匿名评测">
                    {{ info.isAnonymous }}
                </el-descriptions-item>
                <el-descriptions-item>
                </el-descriptions-item>
                <el-descriptions-item label="填表说明">{{ info.instructions }}</el-descriptions-item>
            </el-descriptions>
        </div>
        <div v-if="activeName == 'second'">
            <el-button type="primary" @click="download" style="margin-bottom: 10px;">下载模板</el-button>
            <el-upload class="upload-demo" action="/evaluationUser/import" multiple style="margin-bottom: 10px;"
                :limit="1" :headers="{
                    Authorization: token
                }" :on-success="handleSuccess" :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>

                <div slot="tip" class="el-upload__tip">已存在的被评测对象不能导入，务必保证每行一个评测对象。格式：姓名-性别-单位-职务-职务级别</div>

            </el-upload>
            <el-input type="textarea" v-model="importlist" style="margin-bottom: 10px;" :rows="3"></el-input>
            <el-button type="primary" style="margin-bottom: 10px;" @click="daoru">现在导入</el-button>
            <el-table :data="tableData" strip height="200">
                <el-table-column prop="id" label="序号" align="center" sortable></el-table-column>
                <el-table-column prop="name" label="被评测对象"></el-table-column>
                <el-table-column prop="gender" label="性别"></el-table-column>
                <el-table-column prop="unit" label="单位"></el-table-column>
                <el-table-column prop="position" label="职务"></el-table-column>
                <el-table-column prop="level" label="级别"></el-table-column>

                <el-table-column label="操作" align="center" width="380" fixed="right">
                    <template v-slot="scope">
                        <el-button size="mini" type="primary" v-if="scope.row.status !==1" plain @click="handleEdit(scope.row)">锁定</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="activeName == 'third'">
            <el-button type="primary" @click="logincode()">生成登录码</el-button>
            <h3>公司领导</h3>
            <div class="" style="display: flex;">
                <div v-for="item in loginlist" style="margin-right: 10px;" >
                    <el-tag v-if="item.rank == '公司领导'">{{ item.loginCode }}</el-tag>

                </div>
            </div>
            <h3>基层领导</h3>
            <div class="" style="display: flex;">
                <div v-for="item in loginlist" style="margin-right: 10px;" >
                    <el-tag v-if="item.rank == '基层领导'">{{ item.loginCode }}</el-tag>

                </div>
            </div>
            <h3>公司员工</h3>
            <div class="" style="display: flex;">
                <div v-for="item in loginlist" style="margin-right: 10px;" >
                    <el-tag v-if="item.rank == '公司员工'">{{ item.loginCode }}</el-tag>

                </div>
            </div>
            <el-button type="primary" @click="logincodeexport()">导出</el-button>
        </div>
        <el-dialog title="统计结果" :visible.sync="fromVisible" width="60%" :close-on-click-modal="false" destroy-on-close>
          <div style="width: 100%;overflow: hidden;"> <el-button type="primary" @click="jieguoexport" style="float: right;">导出测评结果</el-button> </div>
          <div style="margin-bottom: 10px;">已提交测评表 <span style="margin-right: 10px;">公司领导</span>
                    {{ info.limitCompanyLeaders }}
                    <span style="margin:0px 10px;">基层领导</span>
                    {{ info.limitBasicLeaders }}
                    <span style="margin:0px 10px;">员工领导</span>
                    {{ info.limitEmployee }}</div>
          <el-table :data="tableData1" strip height="200">
                <el-table-column type="index" label="序号" align="center" sortable></el-table-column>
                <el-table-column prop="name" label="评测对象"></el-table-column>
                <el-table-column prop="limitCompanyLeaders" label="公司领导"></el-table-column>
                <el-table-column prop="limitBasicLeaders" label="基层领导"></el-table-column>
                <el-table-column prop="limitEmployee" label="员工代表"></el-table-column>
                <el-table-column prop="finalScore" label="分数"></el-table-column>
            </el-table>
            <div style="margin-bottom: 10px;">意见收集表</div>
            <el-table :data="tableData3" strip height="200">
                <el-table-column type="index" label="序号" align="center" sortable></el-table-column>
                <el-table-column prop="otherOpinions" label="意见建议与内容">
                  
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>

</template>
<script>
import service from '@/request'

export default {
    data() {
        return {
            fromVisible:false,
            tableData1:[],
            info: {},
            fileList: [],
            tableData: [],
            total: 0,
            list: [],
            importlist: "",
            activeName: "first",
            token: "",
            tableData3:[],
            loginlist: [],
        }
    },
    mounted() {
        this.token = "Bearer " + window.localStorage.getItem("token")
        this.getdata()
        this.getsdata()
    },
    methods: {
      async  handleEdit(row){
            const res=await service.put("/evaluationUser",{
                id:row.id,
                status:1
            });
            console.log(res);
            this.$message.success("锁定成功")
            this.getsdata()
            
        },
        async tjjg(){
        this.fromVisible=true;
        const res=await service.get("/evaluation/statisticalResults/"+this.$route.query.id);
        console.log(res,"123")
        this.tableData1=res.data
        const res1=await service.get("/evaluationContent/page",{
            params:{
                evaluationId:this.$route.query.id,
                page:1,
                size:10000
            }
        })
        console.log(res1)
        this.tableData3=res1.data.records

        },
        async jieguoexport(){
const res=await service.get("/evaluation/export/statisticalResults/"+this.$route.query.id, { responseType: "blob" });
console.log(res)
 // 创建一个a标签
 const link = document.createElement("a");
            // 创建一个blob实例
            let blob = new Blob([res], { type: "application/x-excel" });
            // 隐藏a标签显示
            link.style.display = "none";
            // 生成url并添加到a标签的href属性上
            link.href = URL.createObjectURL(blob);
            // 下载的文件名称
            link.download = "测评结果.xls";
            // 将a标签添加到body中
            document.body.appendChild(link);
            // 模拟点击a标签
            link.click();
            // 将a标签从body中移除
            document.body.removeChild(link);
            // 释放blob对象
            URL.revokeObjectURL(link.href);
        },

       async logincodeexport(){
const res=await service.get("/evaluationUser/exportLoginCode/"+this.$route.query.id, { responseType: "blob" });
console.log(res)
 // 创建一个a标签
 const link = document.createElement("a");
            // 创建一个blob实例
            let blob = new Blob([res], { type: "application/x-excel" });
            // 隐藏a标签显示
            link.style.display = "none";
            // 生成url并添加到a标签的href属性上
            link.href = URL.createObjectURL(blob);
            // 下载的文件名称
            link.download = "登录码.xls";
            // 将a标签添加到body中
            document.body.appendChild(link);
            // 模拟点击a标签
            link.click();
            // 将a标签从body中移除
            document.body.removeChild(link);
            // 释放blob对象
            URL.revokeObjectURL(link.href);
        },
        async logincode() {
            const res = await service.get(`/evaluationUser/getLoginCode/${this.$route.query.id}`)
            console.log(res)
            this.loginlist = res.data
        },
        async download() {
            const res = await service.get("/evaluationUser/importTemplate", { responseType: "blob" });
            console.log(res)
            // 创建一个a标签
            const link = document.createElement("a");
            // 创建一个blob实例
            let blob = new Blob([res], { type: "application/x-excel" });
            // 隐藏a标签显示
            link.style.display = "none";
            // 生成url并添加到a标签的href属性上
            link.href = URL.createObjectURL(blob);
            // 下载的文件名称
            link.download = "模板.xls";
            // 将a标签添加到body中
            document.body.appendChild(link);
            // 模拟点击a标签
            link.click();
            // 将a标签从body中移除
            document.body.removeChild(link);
            // 释放blob对象
            URL.revokeObjectURL(link.href);



        },
        async getsdata() {
            const res = await service.get("/evaluationUser/page", {
                params: {
                    page: 1,
                    evaluationId: this.$route.query.id,
                    size: 100000

                }
            })
            console.log(res)
            this.tableData = res.data.records
            this.total = res.data.total
        },
        async daoru() {
            const res = await service.post(`/evaluationUser/importSave/${this.$route.query.id}`, this.list);
            console.log(res)
            this.getsdata()
        },
        handleSuccess(e) {
            console.log(e)
            e.data.forEach(el => {
                this.list.push(el);
                this.importlist += `${el.name}-${el.gender}-${el.unit}-${el.position}-${el.level}` + "\n"
            });
        },
        handleClick() { },
        async getdata() {
            const res = await service.get(`/evaluation/${this.$route.query.id}`)
            console.log(res)
            this.info = res.data
        }
    }
}
</script>
<style scoped>
.homeinfo {
    width: 100%;
    /* height: 100%; */
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
}

.taglist {
    display: flex;
    align-items: center;
}
</style>